
<template>
  <div>
    <div class="DetailView">
      <!-- 头部 -->

      <div class="header-Detail">
        <div class="head-Detail">
          <router-link tag="div" to="RecommendView" class="leftbox">
            <svg
              t="1666349701466"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2875"
              width="200"
              height="200"
            >
              <path
                d="M224.45 538.68l575.11-346.21-0.05-68.75-575.03 345.61-0.03 69.35z"
                p-id="2876"
                fill="#ffffff"
              ></path>
              <path
                d="M224.45 538.68l575.08 356.96v-69.52L224.48 469.33l-0.03 69.35z"
                p-id="2877"
                fill="#ffffff"
              ></path>
            </svg>
          </router-link>
          <div class="rightbox">
            <div class="box">
              <svg
                t="1666350403208"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4377"
                width="200"
                height="200"
              >
                <path
                  d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z"
                  p-id="4378"
                  fill="#ffffff"
                ></path>
              </svg>
              <p>全书下载</p>
            </div>
            <div class="box">
              <svg
                t="1666694919481"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7249"
                width="200"
                height="200"
              >
                <path
                  d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z"
                  p-id="7250"
                  fill="#ffffff"
                ></path>
                <path
                  d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z"
                  p-id="7251"
                  fill="#ffffff"
                ></path>
                <path
                  d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z"
                  p-id="7252"
                  fill="#ffffff"
                ></path>
                <path
                  d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z"
                  p-id="7253"
                  fill="#ffffff"
                ></path>
              </svg>
              <p>分享</p>
            </div>
            <div class="box">
              <svg
                t="1666695053255"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9184"
                width="200"
                height="200"
              >
                <path
                  d="M469.333333 170.666667h128v128h-128V170.666667z m0 298.666666h128v128h-128v-128z m0 298.666667h128v128h-128v-128z"
                  fill="#ffffff"
                  p-id="9185"
                ></path>
              </svg>
              <p>更多</p>
            </div>
          </div>
        </div>

        <div class="bookbox">
          <div class="book-name">
            <div class="title">{{ list.book.novel.name }}</div>
            <div class="author">
              作者: <span>{{ list.book.novel.author }}</span>
            </div>
            <p>{{ list.book.novel.classify }}</p>
          </div>

          <div class="img">
            <img :src="list.book.novel.img" alt="" />
          </div>
        </div>
      </div>

      <div class="readbox">
        <div class="numberbox">
          <div class="read-number">
            <p>{{ list.book.novel.scores }}</p>
            <div>{{ list.book.novel.person }}</div>
          </div>

          <span></span>

          <div class="read-number">
            <p>{{ list.book.novel.people }}</p>
            <div>正在阅读</div>
          </div>

          <span></span>

          <div class="read-number">
            <p>{{ list.book.novel.enrages }}</p>
            <div>累计人气</div>
          </div>

          <span></span>

          <div class="read-number">
            <p>{{ list.book.novel.ticket }}</p>
            <div>累计必读票></div>
          </div>
        </div>

        <div class="Must-read">
          <div>《必读榜》·10月男生必读榜·第2名</div>
          <span>></span>
        </div>
      </div>

      <!-- 书内容 -->
      <div class="contentbox">
        <div class="content">
          <div>
            <span>简介:</span>
            {{ list.book.novel.synopsis }}
          </div>

          <div>
            <span>角色:</span>
            {{ list.book.novel.role }}
          </div>

          <div class="classify">
            <p>{{ list.book.novel.categorized[0] }}</p>
            <div class="txt">
              {{ list.book.novel.categorized[1].toString() }}
            </div>

            <!-- <div class="txt">神豪</div>

            <div class="txt">逆袭</div>

            <div class="txt">少爷</div>

            <div class="txt">商战</div> -->
          </div>

          <div class="directory">
            <div class="text">目录</div>
            <div class="box">{{ list.book.novel.directory[0] }}</div>
            <div class="box">{{ list.book.novel.directory[1] }}></div>
          </div>
        </div>
      </div>

      <!-- 书评 -->
      <div class="Reviewbox">
        <div ref="publishedbox" class="publishedbox" v-show="show1">
          <div class="published">
            <div class="published-title">
              <div class="symbol" @click="symbol">∨</div>
              <div class="text">写书评</div>
            </div>

            <div class="inputbox">
              <textarea placeholder="请尊重他人，友好评论" v-model="input"></textarea>
            </div>

            <div class="bottombox">
              <div class="left">好好写书评，有机会被评为精选哦~</div>
              <div class="right" @click="add">发表</div>
            </div>
          </div>
        </div>

        <div class="titlebox">
          <p>
            书评 <span>({{ list.book.novel.strips }})</span>
          </p>

          <div class="box">
            <div class="img">
              <svg
                t="1666402235735"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7258"
                width="200"
                height="200"
              >
                <path
                  d="M775.84 392.768l-155.2-172.352L160.768 643.264l-38.368 187.936 190.56-12.832zM929.952 229.952l-131.2-150.944-0.288-0.32a16 16 0 0 0-22.592-0.96l-131.168 120.576 155.168 172.352 128.832-118.464a15.936 15.936 0 0 0 1.248-22.24zM96 896h832v64H96z"
                  p-id="7259"
                ></path>
              </svg>
            </div>

            <span @click="publish"> 写书评 </span>
          </div>
        </div>

        <div class="label">
          <div>
            <span v-for="(a, i) in list.book.novel.appraise" :key="i">{{
              a
            }}</span>
            <!-- <span>好看25.47万</span>
            <span>一般6.24万</span>
            <span>不好看1.01万</span>
            <span>打赏留言5.93万</span>i
            <span>精华75</span> -->
          </div>
        </div>

        <div class="userbox">
          <div
            class="reviewbox"
            v-for="(c, p) in item"
            :key="p"
          >
            <div class="head-user">
              <div class="leftbox">
                <img :src="c.img" alt="" />
                {{ c.author }}
                <span>{{ c.grade }}</span>
              </div>

              <div class="rightbox">
                <img src="../assets/img/精华_03.jpg" alt="" />
                <img src="../assets/img/三点省略号_03.jpg" alt="" />
              </div>
            </div>

            <div class="name">
              <span class="titleText">
                {{ c.nav }}
              </span>
              <span class="openClose"></span>
            </div>

            <div class="footerbox">
              <div>
                <p>
                  {{ c.year }}<span>{{ c.time }}</span>
                </p>
              </div>

              <div>
                <div class="message">
                  <p>{{ c.Information }}</p>
                  <div>
                    <svg
                      t="1666425910405"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="8216"
                      width="200"
                      height="200"
                    >
                      <path
                        d="M266.024819 553.999556c-42.324968 0-76.759221-34.435277-76.759221-76.763314 0-42.324968 34.434254-76.759221 76.759221-76.759221s76.759221 34.434254 76.759221 76.759221C342.78404 519.564279 308.35081 553.999556 266.024819 553.999556zM266.024819 437.656805c-21.824051 0-39.579437 17.755386-39.579437 39.579437 0 21.827121 17.755386 39.58353 39.579437 39.58353s39.579437-17.757432 39.579437-39.58353C305.604256 455.412191 287.84887 437.656805 266.024819 437.656805z"
                        p-id="8217"
                      ></path>
                      <path
                        d="M521.82067 553.999556c-42.324968 0-76.759221-34.435277-76.759221-76.763314 0-42.324968 34.434254-76.759221 76.759221-76.759221s76.759221 34.434254 76.759221 76.759221C598.579891 519.564279 564.146661 553.999556 521.82067 553.999556zM521.82067 437.656805c-21.824051 0-39.579437 17.755386-39.579437 39.579437 0 21.827121 17.755386 39.58353 39.579437 39.58353s39.58046-17.757432 39.58046-39.58353C561.40113 455.412191 543.645744 437.656805 521.82067 437.656805z"
                        p-id="8218"
                      ></path>
                      <path
                        d="M772.168438 553.999556c-42.327014 0-76.763314-34.435277-76.763314-76.763314 0-42.324968 34.435277-76.759221 76.763314-76.759221 42.324968 0 76.759221 34.434254 76.759221 76.759221C848.927659 519.564279 814.493405 553.999556 772.168438 553.999556zM772.168438 437.656805c-21.826098 0-39.584554 17.755386-39.584554 39.579437 0 21.827121 17.758456 39.58353 39.584554 39.58353 21.824051 0 39.58046-17.757432 39.58046-39.58353C811.748898 455.412191 793.992489 437.656805 772.168438 437.656805z"
                        p-id="8219"
                      ></path>
                      <path
                        d="M287.374056 905.644405c-3.447519 0-6.933923-0.958838-10.048867-2.963495-8.631588-5.559623-11.122315-17.062608-5.562692-25.694195 17.160845-26.643823 50.127677-44.535309 97.987708-53.179177 32.118512-5.801123 59.942207-5.307889 63.439868-5.214768l431.729815 0c35.307134 0 64.031339-28.725228 64.031339-64.032362L928.951227 227.848335c0-35.307134-28.724205-64.031339-64.031339-64.031339L173.274392 163.816996c-35.307134 0-64.031339 28.724205-64.031339 64.031339l0 526.71105c0 33.039487 24.747637 60.429301 57.565067 63.711044 2.136663 0.212848 4.314259 0.321318 6.466272 0.321318l51.903114 0c10.266831 0 18.590404 8.322549 18.590404 18.58938s-8.322549 18.58938-18.590404 18.58938l-51.903114 0c-3.37998 0-6.798846-0.169869-10.161431-0.50449-24.855084-2.485611-47.832402-14.06125-64.702628-32.595372-16.989953-18.665105-26.347065-42.85504-26.347065-68.112284L72.063269 227.848335c0-55.80805 45.403073-101.211123 101.211123-101.211123l691.645496 0c55.80805 0 101.2101 45.403073 101.2101 101.211123l0 526.71105c0 55.80805-45.402049 101.211123-101.2101 101.211123L432.639534 855.770508l-0.293689-0.00921c-0.24764-0.007163-26.750247-0.725524-56.611346 4.746094-25.412786 4.65502-58.657958 14.784728-72.715115 36.609803C299.466466 902.634862 293.482171 905.644405 287.374056 905.644405z"
                        p-id="8220"
                      ></path>
                    </svg>
                  </div>
                </div>

                <div class="Kudos">
                  <p>{{ list.book.novel.comments[0].Kudos }}</p>
                  <div>
                    <svg
                      t="1666428842622"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2562"
                      width="200"
                      height="200"
                    >
                      <path
                        d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                        p-id="2563"
                      ></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

    
        <!-- 书评底部 -->
        <div class="AllReviews">查看全部书评</div>
      </div>

      <div class="book-content">
        <div class="title">{{ list.book.novel.books[0] }}</div>

        <div
          class="boxcomments"
          v-for="(item, index) in list.book.novel.books[1]"
          :key="index"
        >
          <p>{{ item }}</p>
          <!-- <p>今晚，是萧家的家主萧老太七十岁的寿宴。</p>
          <p>一众孙子、孙女、孙女婿纷纷奉上豪礼。</p>
          <p>
            “奶奶，听说您爱喝茶，这块百年普洱茶砖价值五十万，是送给您的寿礼。”
          </p>
          <p></p>
          <p>萧老太太看着各种礼物，开怀大笑，全家一片其乐融融。</p>
          <p>
            这时，萧老太太的长孙女婿叶辰忽然开口说：“奶奶，能不能借我一百万，福利院的李阿姨得了尿毒症，需要钱治病......”
          </p> -->
        </div>

        <div class="Read-On">
          继续阅读
          <img src="../assets/img/尖括号下.png" alt="" />
        </div>
      </div>

      <!-- 猜你喜欢  -->

      <div class="guess-like">
        <p>猜你喜欢</p>

        <div class="likebox">
          <div
            class="imgbox"
            v-for="(i, x) in list.book.novel.likebook"
            :key="x"
          >
            <div class="img">
              <img :src="i.img" alt="" />
            </div>

            <p>{{ i.headline }}</p>
          </div>
          <!-- <div class="imgbox">
            <div class="img">
              <img src="../assets/img/上门女婿.jpg" alt="" />
            </div>

            <p>上门女婿叶辰</p>
          </div>
          <div class="imgbox">
            <div class="img">
              <img src="../assets/img/上门女婿.jpg" alt="" />
            </div>

            <p>上门女婿叶辰</p>
          </div>
          <div class="imgbox">
            <div class="img">
              <img src="../assets/img/上门女婿.jpg" alt="" />
            </div>

            <p>上门女婿叶辰</p>
          </div>
          <div class="imgbox">
            <div class="img">
              <img src="../assets/img/上门女婿.jpg" alt="" />
            </div>

            <p>上门女婿叶辰</p>
          </div>
          <div class="imgbox">
            <div class="img">
              <img src="../assets/img/上门女婿.jpg" alt="" />
            </div>

            <p>上门女婿叶辰</p>
          </div> -->
        </div>
      </div>

      <!-- 书友圈 -->
      <!-- <div class="Book-Circle">
        <p>书友圈中包含本书的话题</p>
        <div class="Circlebox">
          <div class="Circle">
            <div class="text">
              <div>看完了却舍不得删的小说</div>
              <p>331个帖子·拯救10.0万人书荒</p>
            </div>

            <div class="img">
              <img src="../assets/img/书友圈.png" alt="" />
            </div>
          </div>

          <div class="Circle">
            <div class="text">
              <div>看完了却舍不得删的小说</div>
              <p>331个帖子·拯救10.0万人书荒</p>
            </div>

            <div class="img">
              <img src="../assets/img/书友圈.png" alt="" />
            </div>
          </div>

          <div class="Circle">
            <div class="text">
              <div>看完了却舍不得删的小说</div>
              <p>331个帖子·拯救10.0万人书荒</p>
            </div>

            <div class="img">
              <img src="../assets/img/书友圈.png" alt="" />
            </div>
          </div>

          <div class="Circle">
            <div class="text">
              <div>看完了却舍不得删的小说</div>
              <p>331个帖子·拯救10.0万人书荒</p>
            </div>

            <div class="img">
              <img src="../assets/img/书友圈.png" alt="" />
            </div>
          </div>
          <div class="Circle">
            <div class="text">
              <div>看完了却舍不得删的小说</div>
              <p>331个帖子·拯救10.0万人书荒</p>
            </div>

            <div class="img">
              <img src="../assets/img/书友圈.png" alt="" />
            </div>
          </div>
        </div>
      </div> -->

      <!-- 底部 -->
      <div class="footder">
        <div>
          本作品"经致文化"授权七猫,版权由"经致文化"负责。
          如有疑问可联系:fawu@qimao.com或客服QQ:359897377
        </div>
      </div>

      <!-- 导航类型 -->

      <div class="typebigbox">
        <div class="typebox">
          <div class="bookshelf" @click="open2" :offset="600">
            <svg
              t="1666505936636"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3075"
              width="200"
              height="200"
            >
              <path
                d="M849.82 732.68l-32.27-124.51-101.64-373.86a32.29 32.29 0 0 0-39.37-22.91l-124.88 32.26A32.3 32.3 0 0 0 528.1 233H205.41a32.26 32.26 0 0 0-32.27 32.25v516.14a32.26 32.26 0 0 0 32.27 32.26H528.1a32.26 32.26 0 0 0 32.27-32.26V523.33l71 265.16a32.27 32.27 0 0 0 32.27 23.87 36.78 36.78 0 0 0 8.39 0l155.86-41.61a32.25 32.25 0 0 0 19.68-15.16 33.81 33.81 0 0 0 2.25-22.91z m-516.3 17.75h-96.81v-64.52h96.81z m0-129h-96.81V427.85h96.81z m0-258.06h-96.81v-64.55h96.81z m161.34 387.06h-96.81v-64.52h96.81z m0-129h-96.81V427.85h96.81z m0-258.06h-96.81v-64.55h96.81z m72.61-56.13l93.58-25.16 16.78 62.26-93.58 25.16zM651 618.82l-50-187.1 93.58-25.16 50 187.1z m32.27 124.51l-16.78-62.26 93.58-25.16 16.79 62.26z"
                p-id="3076"
              ></path>
            </svg>

            <p @click="aaa">加书架</p>
          </div>

          <!-- <div class="bookshelf">
            <svg
              t="1666505884397"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4469"
              width="200"
              height="200"
            >
              <path
                d="M660.8 430.4c1.6 0 4.8 0 6.4-1.6 8-3.2 11.2-12.8 8-20.8-4.8-11.2-11.2-22.4-19.2-33.6-4.8-6.4-16-8-22.4-3.2-6.4 4.8-8 16-3.2 22.4 6.4 8 11.2 17.6 16 27.2 3.2 4.8 8 9.6 14.4 9.6zM606.4 332.8c-24-12.8-49.6-19.2-75.2-19.2-36.8 0-72 12.8-99.2 35.2-6.4 4.8-8 16-3.2 22.4 3.2 3.2 8 6.4 12.8 6.4 3.2 0 6.4-1.6 9.6-3.2 40-32 96-36.8 140.8-12.8 8 4.8 17.6 1.6 22.4-6.4 1.6-9.6-1.6-19.2-8-22.4z"
                p-id="4470"
              ></path>
              <path
                d="M785.6 510.4v-44.8c0-145.6-118.4-264-264-264S257.6 320 257.6 465.6v44.8c-48 14.4-80 57.6-80 107.2v80c0 62.4 49.6 112 112 112s112-49.6 112-112v-80c0-49.6-32-92.8-80-107.2v-44.8c0-110.4 89.6-200 200-200s200 89.6 200 200v44.8c-48 14.4-80 57.6-80 107.2v80c0 62.4 49.6 112 112 112s112-49.6 112-112v-80c0-49.6-32-92.8-80-107.2z m-448 107.2v80c0 27.2-20.8 48-48 48s-48-20.8-48-48v-80c0-27.2 20.8-48 48-48s48 20.8 48 48z m464 80c0 27.2-20.8 48-48 48s-48-20.8-48-48v-80c0-27.2 20.8-48 48-48s48 20.8 48 48v80z"
                p-id="4471"
              ></path>
            </svg>

            <p>听书</p>
          </div> -->

          <router-link tag="div" to="/ContentDetails" class="Read-Now">
            <p>立即免费阅读</p>
          </router-link>
        </div>
      </div>
    </div>

    <br />
    <br />
    <br />
  </div>
</template>

<script>
// import { getdetailData } from "../api/home.js";
export default {
  data() {
    return {
      lists: null,
      // textHeight: null,
      // status: false,
      // idShowText: false,
      show1: false,
      show2: true,
      arr1:[],
      book: [],
      novel:"",
      arr: [],

      input:"",
      // item:null,
      item:[]
      
    };
  },

  created() {
    this.list = JSON.parse(window.localStorage.getItem("list"));
    this.item = JSON.parse(window.localStorage.getItem("item"));
    this.item=this.list.book.novel.comments
    console.log("书书书", this.list.book);
    // let novel = localStorage.arr;
    // if(novel) {
    //   this.arr = JSON.parse(novel)
    // }
    // getdetailData().then((data) => {
    //   console.log(data);
    //   console.log(data.data);
    //   this.lists = data.data;
    //   console.log("data啦",data)
    // });
    // if(!JSON.parse(window.localStorage.getItem("book"))){
    //   window.localStorage.setItem("book",JSON.stringify([]))

    //  }else{
    //   this.list.book.novel = JSON.parse(window.localStorage.getItem("book"))
    //  }
  },

  methods: {
    aaa() {
      // this.novel = this.list.book.novel
      // this.arr.unshift(this.novel)
      // console.log(this.novel);
      // localStorage.arr = JSON.parse(this.arr);
      // localStorage.this.list.book.novel
      // this.arr1=this.arr1.unshift(this.list.book)
      window.localStorage.setItem("arr",JSON.stringify(this.list.book))
      console.log(this.list.book.novel);
    },

    //{{list.book.novel}}
    // 通过ref属性获取标签的样式，实现点击显示隐藏
    publish() {
      console.log("点击");
      this.$refs.publishedbox.style.display = "block";
    },
    symbol() {
      this.$refs.publishedbox.style.display = "none";
    },

    // 加入书架弹窗
    open2() {
      this.$message({
        message: "加入书架成功",
        type: "success",
        duration: 600,
      });

      console.log("书架添加");
    },


    add(){
      this.item.push({
        nav:this.input,
        img:"./images/小说图片1.jpg",
        Kudos:"200",
        grade:"LV20",
        time:"1:10",
        year:"2022-10-16",
        Information:"70",

      })
      this.$refs.publishedbox.style.display = "none";
      console.log("添加")
      window.localStorage.setItem("item",JSON.stringify(this.item))
    }
  },
};
</script>

<style lang="scss" scoped>
// 写书评
.DetailView {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
  height: 100%;
  padding-bottom: 10px;

  .header-Detail {
    background-color: #6f6c6a;
    .head-Detail {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      .leftbox {
        .icon {
          width: 20px;
          height: 30px;
        }
      }
      .rightbox {
        display: flex;
        .box {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-left: 16px;
          .icon {
            width: auto;
            height: 20px;
          }
          p {
            font-size: 12px;
            color: #ffffff;
          }
        }
      }
    }
  }
  .bookbox {
    display: flex;
    padding: 0px 20px;
    justify-content: space-between;
    padding-bottom: 20px;
    .book-name {
      .title {
        font-size: 20px;
        color: #ffffff;
        margin-bottom: 20px;
      }
      .author {
        color: #c1c0bf;
        font-size: 10px;
        margin-bottom: 50px;
        span {
          color: #fcfcfc;
          border-bottom: 1px solid #fcfcfc;
        }
      }
      p {
        color: #c1c0bf;
        font-size: 10px;
      }
    }
    .img {
      width: auto;
      height: 130px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  /* 阅读人数 */
  .readbox {
    background-color: #ffffff;
    padding-bottom: 14px;
    .numberbox {
      display: flex;
      padding-top: 12px;
      justify-content: space-around;
      .read-number {
        position: relative;
        p {
          font-size: 16px;
          color: #222222;
          font-weight: bold;
          text-align: center;
        }
        div {
          color: #bababa;
          font-size: 10px;
        }
      }
      span {
        width: 1px;
        height: 26px;
        background-color: #bababa;
      }
    }
    .Must-read {
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      padding-right: 2px;
      padding-top: 16px;
      span {
        padding-right: 10px;
      }
    }
  }
  /* 书的内容 */
  .contentbox {
    margin-top: 10px;
    padding: 16px 16px;
    background-color: #ffffff;
    padding-bottom: 5px;
  }
  .content {
    div {
      &:nth-child(2) {
        padding: 10px 0px;
      }
      span {
        font-weight: bold;
      }
      p {
        font-weight: bold;
      }
      .txt {
        position: relative;
        margin-right: 21px;
        padding: 0px;
        color: #4a7aac;
        &::before {
          width: 1px;
          height: 16px;
          background-color: #ececec;
          margin: 0px 10px;
          position: absolute;
          right: -20px;
          top: 5px;
          content: "";
        }
        &:nth-child(6)::before {
          width: 0px;
        }
      }
    }
    .classify {
      display: flex;
      align-items: center;
      p {
        padding-right: 5px;
      }
    }
    .directory {
      margin-top: 16px;
      display: flex;
      border-top: 1px solid #ececec;
      align-items: baseline;
      .text {
        font-weight: bold;
      }
      .box {
        font-size: 13px;
        margin-left: 7px;
        color: #9b9b9b;
      }
    }
  }
  /* 书评 */
  .Reviewbox {
    margin-top: 10px;
    padding-top: 14px;
    background-color: #fff;
    position: relative;

    .publishedbox {
      // width: 100%;
      // position: fixed;
      display: none;
      left: 7px;
      position: absolute;
      top: 52px;
      z-index: 100;
      padding: 10px 10px;
      background-color: #fff;
      .published {
        padding: 10px;
        background-color: #fff;
        .published-title {
          position: relative;
          text-align: center;
          .symbol {
            position: absolute;
            left: 0px;
            font-size: 20px;
            top: -4px;
          }
          .text {
            color: #000;
            font-weight: bold;
          }
        }

        .inputbox {
          margin-top: 10px;
          textarea {
            width: 100%;
            height: 378px;
            padding-top: 4px;
            text-indent: 4px;
            border: 1px solid #e2e2e2;
            border-radius: 4px;
          }
        }

        .bottombox {
          padding-top: 6px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            color: #c69a4f;
            font-size: 16px;
          }

          .right {
            color: #000;
            background-color: #fdc903;
            padding: 9px 20px;
            border-radius: 20px;
          }
        }
      }
    }

    .titlebox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 14px;
      padding-right: 16px;
      .box {
        display: flex;
        background-color: #fcd230;
        padding: 4px 10px;
        border-radius: 12px;
        .img {
          svg {
            width: auto;
            height: 12px;
          }
        }
      }
      p {
        font-weight: bold;
        span {
          font-size: 10px;
          font-weight: 600;
        }
      }
    }
    .label {
      padding: 10px 0px;
      padding-left: 14px;
      padding-right: 16px;
      div {
        margin-bottom: 10px;
        span {
          padding: 4px 10px;
          background-color: #f8f8f8;
          margin-right: 10px;
          font-size: 10px;
          color: #707070;
          border-radius: 20px;
          margin-bottom: 4px;
          display: inline-block;
        }
      }
    }
  }

  .userbox {
    // margin-bottom: 24px;
    .reviewbox {
      margin-bottom: 24px;
      .head-user {
        display: flex;
        justify-content: space-between;
        padding-left: 14px;
        padding-right: 16px;
        .leftbox {
          display: flex;
          align-items: center;
          font-size: 15px;
          color: #666666;
          img {
            width: 30px;
            height: 30px;
            margin-right: 4px;
            border-radius: 50px;
          }
          span {
            margin-left: 4px;
            font-size: 10px;
            padding: 0px 4px;
            background-color: #b1c0d6;
            border-radius: 12px;
            color: #f2f7f9;
          }
        }
        .rightbox {
          display: flex;
          align-items: center;
          img {
            &:nth-child(1) {
              width: auto;
              height: 30px;
              margin-right: 10px;
            }
            &:nth-child(2) {
              width: auto;
              height: 16px;
              margin-right: 10px;
            }
          }
        }
      }

      .name {
        margin-bottom: 2px;
        position: relative;
        padding: 2px 9px;
        .titleText {
          // font-weight: bold;
          font-size: 18px;
          padding: 0 10px;
          color: #2d2d2d;
        }
        .openClose {
          font-size: 16px;
          font-weight: bold;
          color: #7c9fc3;
          // background-color: #fff;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.2),
            #fff 30%
          );
        }
        .openSpan {
          position: absolute;
          right: 8px;
          bottom: -2px;
          padding: 4px 9px;
        }
        .statusText {
          overflow: hidden;
          display: block;
        }
        .statusText:after {
          position: absolute;
          bottom: 0;
          right: 2px;
          width: 48px;
          padding-left: 30px;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.2),
            #fff 45%
          );
        }
      }

      .footerbox {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        padding-left: 14px;
        padding-right: 16px;
        div {
          display: flex;
          align-items: center;
          p {
            color: #dddddd;
            font-size: 14px;
          }
          .message {
            display: flex;
            .icon {
              width: auto;
              height: 15px;
            }
            p {
              padding-right: 4px;
            }
          }
          .Kudos {
            margin-left: 40px;
            .icon {
              width: auto;
              height: 15px;
            }
            p {
              padding-right: 4px;
            }
          }
        }
      }
    }
  }

  /* 书评 */
  .AllReviews {
    height: 30px;
    line-height: 22px;
    text-align: center;
    color: #747474;
    font-size: 15px;
    border-top: 1px solid #ededed;
    padding-top: 10px;
  }
  /* 书的内容 */
  .book-content {
    margin-top: 10px;
    background-color: #ffffff;
    padding: 10px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #222222;
    }
    .boxcomments {
      padding-bottom: 10px;
      p {
        font-size: 18px;
        color: #222222;
        padding-left: 20px;
      }
    }
    .Read-On {
      text-align: center;
      color: #999999;
      padding-top: 20px;
    }
    img {
      width: auto;
      height: 12px;
    }
  }
  /* 猜你喜欢 */
  .guess-like {
    margin-top: 10px;
    background-color: #ffffff;
    padding-top: 10px;
    padding-left: 32px;
    margin-bottom: 10px;
    p {
      color: #222222;
      font-weight: bold;
      font-size: 20px;
      padding-bottom: 10px;
    }
    .likebox {
      display: flex;
      flex-wrap: wrap;
      .imgbox {
        display: flex;
        width: 33%;
        flex-direction: column;
        img {
          width: auto;
          height: 100px;
        }
        p {
          font-size: 13px;
          color: #222222;
          width: 75px;
        }
      }
    }
  }
  /* 书友圈 */
  .Book-Circle {
    padding-left: 32px;
    padding-top: 10px;
    background-color: #ffffff;
    margin-top: 12px;
    padding-right: 43px;
    p {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 14px;
    }
    .Circlebox {
      .Circle {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        border-bottom: 1px solid #efefef;
        padding-bottom: 10px;
        .text {
          div {
            font-size: 17px;
            color: #2b2b2b;
            padding-bottom: 11px;
          }
          p {
            font-size: 12px;
            color: #bababa;
            padding: 0px;
          }
        }
        .img {
          width: auto;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  /* 底部 */
  .footder {
    padding: 10px 32px;
    background-color: #ffffff;
    div {
      color: #9d9d9d;
      font-size: 12px;
    }
  }
  /* 导航类型 */
  .typebigbox {
    bottom: -1px;
    position: fixed;
    padding-top: 6px;
    padding-bottom: 10px;
    width: 100%;
    background-color: #f5f5f5;
    .typebox {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .bookshelf {
        display: flex;
        flex-direction: column;
        text-align: center;
        .icon {
          width: auto;
          height: 30px;
        }
        p {
          color: #6d6d6d;
          font-size: 12px;
        }
      }
      .Read-Now {
        padding: 10px 12px;
        background-color: #fdcb09;
        border-radius: 20px;
        p {
          color: #222222;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}

* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
ul,
ol {
  list-style: none;
}
</style>